<template>
<div class="fold">
  <div class="left-part relative-position" :class="{fold}">
    <div class="left-part-content">
      <slot name="tree-list"></slot>
    </div>
    <div :class="isStatFold ? 'toggle-hide-word' : 'toggle-hide'" @click="toggleHide">
      <q-icon :name="fold?'iconfont icontubiao-43':'iconfont icontubiao-44'" style="margin-left: -4px" v-if="!isStatFold"/>
      <span v-else>设备选择</span>
    </div>
  </div>
  <div class="right-part">
    <q-card class="full-height" v-if="isShowInnerCard">
        <slot name="content"></slot>
        <q-inner-loading :showing="isShowInnerLoading">
            <q-spinner-gears size="50px" color="primary" />
        </q-inner-loading>
    </q-card>
    <slot name="content" v-else></slot>
  </div>
</div>
</template>

<script>
export default {
  name: 'fold',
  data () {
    return {
      // 是否折叠左侧树结构
      fold: this.isStatFold || false
    }
  },
  props: {
    isStatFold: {
      type: Boolean,
      default: false
    },
    // 右侧是否需要loading
    isShowInnerCard: {
      type: Boolean,
      default: false
    },
    isShowInnerLoading: Boolean
  },
  mounted () {
  },
  computed: {
    isStatFoldWord () {
      return this.isStatFold ? 'toggleHideWord' : 'toggleHide'
    }
  },
  methods: {
    // 折叠
    toggleHide () {
      this.fold = !this.fold
      this.$emit('onFold', this.fold)
    }
  }
}
</script>

<style scoped lang="stylus">
.fold{
  width 100%
  height 100%
  display flex
  .left-part{
    flex 19.7% 0
    width 19.7%
    min-width 250px
    max-width 330px
    margin-right 24px
    height 100%
    transition all 300ms ease-in
    .left-part-content{
      width 100%
      height 100%
      overflow hidden
    }
    .toggle-hide{
      position absolute
      right -10px
      top 50%
      z-index 10
      transform translateY(-50%)
      background-color #fff
      width 10px
      line-height 35px
      text-align center
      border-radius 0 4px 4px 0
      font-size 18px
      overflow hidden
      border 1px solid #eee
    }
    .toggle-hide-word{
      position absolute
      right -14px
      top 50%
      z-index 10
      transform translateY(-50%)
      background-color #fff
      width 15px
      text-align center
      border-radius 0 4px 4px 0
      font-size 12px
      overflow hidden
      border 1px solid #eee
      color $primary
      cursor pointer
    }
    &.fold{
      flex 0 0
      width 0
      min-width 0px
      margin-right 0
      .toggle-hide{
        box-shadow 1px 0px 3px 0px rgba(0, 0, 0, 0.25)
      }
    }
  }
  .right-part{
    flex 1
    background-color #fff
    border-radius 6px
    padding 5px 0
    overflow-x auto
  }
}
</style>
